<template>
  <div class="table-box">
    <dv-border-box-12>
      <div class="table-inner">
        <div class="table-filter">
          <div class="filter-item">
            <el-radio-group
              v-model="taskStatus"
              size="large"
              style="margin-left: 40px"
              is-button
              @change="changeStatus"
            >
              <el-radio-button :label="-1">全部</el-radio-button>
              <el-radio-button :label="0">待服务</el-radio-button>
              <el-radio-button :label="1">已服务</el-radio-button>
              <el-radio-button :label="2">已取消</el-radio-button>
            </el-radio-group>
          </div>
          <div class="filter-item filter-type" style="margin-left: 30px">
            <span>类型：</span>
            <el-select
              v-model="taskType"
              style="width: 100px"
              @change="changeStatus"
            >
              <el-option
                v-for="(item, index) in typeList"
                :key="index"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="table-list">
          <el-table
            :data="list"
            stripe
            style="width: 100%"
            v-loading="loading"
            empty-text="暂无数据"
          >
            <el-table-column
              label="联系方式"
              prop="userPhone"
              align="center"
            ></el-table-column>
            <el-table-column
              label="类型"
              prop="advTypeName"
              align="center"
            ></el-table-column>
            <el-table-column
              label="预约接车位置"
              prop="storeAddress"
              align="center"
              show-overflow-tooltip
              :min-width="200"
            ></el-table-column>
            <el-table-column
              label="预约接车时间段"
              prop="addTime"
              align="center"
            ></el-table-column>
            <el-table-column
              label="状态"
              prop="serviceStatusName"
              align="center"
            >
              <template #default="{row}">
                <span :class="{warning: row.serviceStatusName=='未服务',success: row.serviceStatusName=='已服务'}">{{ row.serviceStatusName }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </dv-border-box-12>
  </div>
</template>

<script>
import { getLatestOrderList, getAdvTypeList } from "../../api/index";
export default {
  data() {
    return {
      loading: false,
      taskStatus: 0,
      taskType: -1,
      typeList: [],
      list: [
        {
          no: "2024071547854",
          user: "张三",
          phone: "15862354785",
          type: "接车服务",
          store: "xxxx门店",
          createTime: "2024-07-25  12:00",
          status: "待服务",
        },
        {
          no: "2024071547854",
          user: "张三",
          phone: "15862354785",
          type: "接车服务",
          store: "xxxx门店",
          createTime: "2024-07-25  12:00",
          status: "待服务",
        },
        {
          no: "2024071547854",
          user: "张三",
          phone: "15862354785",
          type: "接车服务",
          store: "xxxx门店",
          createTime: "2024-07-25  12:00",
          status: "待服务",
        },
        {
          no: "2024071547854",
          user: "张三",
          phone: "15862354785",
          type: "接车服务",
          store: "xxxx门店",
          createTime: "2024-07-25  12:00",
          status: "待服务",
        },
        {
          no: "2024071547854",
          user: "张三",
          phone: "15862354785",
          type: "接车服务",
          store: "xxxx门店",
          createTime: "2024-07-25  12:00",
          status: "待服务",
        },
        {
          no: "2024071547854",
          user: "张三",
          phone: "15862354785",
          type: "接车服务",
          store: "xxxx门店",
          createTime: "2024-07-25  12:00",
          status: "待服务",
        },
        {
          no: "2024071547854",
          user: "张三",
          phone: "15862354785",
          type: "接车服务",
          store: "xxxx门店",
          createTime: "2024-07-25  12:00",
          status: "待服务",
        },
        {
          no: "2024071547854",
          user: "张三",
          phone: "15862354785",
          type: "接车服务",
          store: "xxxx门店",
          createTime: "2024-07-25  12:00",
          status: "待服务",
        },
        {
          no: "2024071547854",
          user: "张三",
          phone: "15862354785",
          type: "接车服务",
          store: "xxxx门店",
          createTime: "2024-07-25  12:00",
          status: "待服务",
        },
        {
          no: "2024071547854",
          user: "张三",
          phone: "15862354785",
          type: "接车服务",
          store: "xxxx门店",
          createTime: "2024-07-25  12:00",
          status: "待服务",
        },
      ],
      setTimeId: null,
    };
  },
  created() {
    this.id = atob(this.$route.query.id);
  },
  mounted() {
    this.getTypeList();
    this.getData();
    this.setLoop();
  },
  methods: {
    setLoop() {
      let that = this;
      this.setTimeId = setInterval(() => {
        that.getData();
      }, 10000);
    },
    getData() {
      this.loading = true;
      let para = {
        id: this.id,
        serviceStatus: this.taskStatus,
        advType: this.taskType,
        limit: 10,
      };
      if (this.taskStatus == -1) {
        delete para.serviceStatus;
      }
      if (this.taskType == -1) {
        delete para.advType;
      }
      console.log(para);
      getLatestOrderList(para).then((res) => {
        this.list = res.data.data;
        this.loading = false;
      });
    },

    changeStatus() {
      this.getData();
      clearInterval(this.setTimeId);
      this.setLoop();
    },

    getTypeList() {
      getAdvTypeList().then((res) => {
        let list = res.data.data;
        list.unshift({ value: "全部", key: -1 });
        this.typeList = list;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.table-box {
  width: 100%;
  height: 640px;
  padding: 0 30px;
  box-sizing: border-box;
  .table-inner {
    padding: 24px 34px;
  }
  .table-filter {
    display: flex;
    .filter-type {
      color: #fff;
    }
  }
  .table-list {
    margin-top: 24px;
  }
}

.warning {
  color: red;
}

.success {
  color: green;
}

.filter-type {
  display: flex;
  align-items: center;
}

:deep(.el-table) {
  --el-table-border-color: #00000000;
}

:deep(.el-table .cell) {
  --el-table-border-color: #00000000;
}

:deep(.el-table thead tr) {
  background: #00000000 !important;
  border: 1px solid #00000000 !important;
  color: #ffffff !important;
  font-size: 14px !important;
}

:deep(.el-table tr) {
  background: #113864 !important;
  border: 1px solid #113864 !important;
  color: #ffffff !important;
  font-size: 14px !important;
}

:deep(.el-table tbody tr:nth-child(2n-1)) {
  background: #00000000 !important;
  border: 1px solid #00000000 !important;
  color: #ffffff !important;
  font-size: 14px !important;
}

:deep(.el-table .el-table__cell) {
  padding: 12px 0 !important;
}

:deep(.el-table th.el-table__cell) {
  background: #113864 !important;
  border: 1px solid #113864 !important;
  color: #ffffff !important;
  font-size: 14px !important;
}

:deep(
    .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell
  ) {
  background: #113864 !important;
  border: 1px solid #113864 !important;
  color: #ffffff !important;
  font-size: 14px !important;
}

:deep(
    .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell
  ) {
  background-color: #00000000 !important;
}
</style>